<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>咨询广场</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/myui.css">
		<link href="css/myui.css" rel="stylesheet" />
		<style>
			html,body{
				background: #f5f5f5;
			}
			.mui-control-item,.mui-table-view-cell{
				background: #fff;
			}
			.mui-table-view-cell{
				margin-top: 0.5rem;
				border-top: 1px solid #efefef;
				border-bottom: 1px solid #efefef;
			}
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-control-content,.mui-table-view {
			    background: #f5f5f5;
			}
			.mui-table-view-cell:after {
			    height: 0px;
			}
			.mui-navbar .mui-bar, .mui-pull-left_style {
			    background: #3EBDF5;
			    height: 3rem;
			}
			#app{
				height: 0rem;
			}
			.Consultation_Plaza_content_bottom{
				position: relative;
				overflow: hidden;
				margin-top: 0.5rem;
				margin-bottom: 0.5rem;
				padding: 0 2%;
			}
			.Consultation_Plaza_content_bottom_left{
				float: left;
				width: 50%;
				height: 1.5rem;
				line-height: 1.5rem;
			}
			.Consultation_Plaza_content_bottom_left>img{
				width: 1rem !important;
				float: left;
				height: 1rem !important;
    			margin-top: 0.2rem !important;
			}
			.Consultation_Plaza_content_bottom_left>div{
				margin-left: 1.5rem;
			}
			.Consultation_Plaza_content_bottom_right{
				float: right;
				width: 50%;
			}
			.Consultation_Plaza_content_bottom_right>a{
				padding: 0.1rem 0.6rem;
				background: #53b0ff;
				color: #fff;
				font-size: 0.6rem;
				float: right;
			}
			.reservation_content1{
				padding-bottom: 0;
			}
			#pullrefresh{
				height: 100%;
				padding-top: 3rem;
			}
			.mui-table-view-chevron .mui-table-view-cell{
				padding-right: 15px;
			}
			.reservation_content1_content{
				font-size: 0.8rem;
			}
		</style>
	</head>
	<body>
		<div id="app" class="mui-views" data-view="1">
			<div class="mui-view">
				<div class="mui-navbar">
					<div class="mui-navbar-inner mui-bar mui-bar-nav mui-navbar-center">
						<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left mui-pull-left_style">
							<span class="mui-icon mui-icon-left-nav"></span>
						</button>
						<h1 class="mui-center mui-title mui-title_fff" style="margin-left: -15px;">咨询广场</h1>
					</div>
				</div>
				<div class="mui-pages">
					<div id="setting" class="mui-page mui-page-center">
			<!--页面主内容区结束-->
					</div>
				</div>
			</div>
		</div>
		<div class="reservation_content" id="pullrefresh">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron wh_plaza_content">
				</ul>
			</div>
		</div>
		<script src="js/index.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			var ListHeight = $(window).height() - ($("#sliderSegmentedControl").outerHeight()+$("header").outerHeight()+$("#sliderProgressBar").outerHeight());
			$(".mui-slider-group").css("height",ListHeight);
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			
			mui.init({
				 gestureConfig:{
   					tap: true, //默认为true
   			},
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			mui('.reservation_content').scroll();

			$(".mui-scrollbar").css("display","none");

			var count = 0;
			var phoneNum = "";
			mui.plusReady(function(){
				phoneNum = localStorage.getItem("phoneNum");
			});
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
					var url = get_url() + 'questionAnswer/getQuestionList';
					var table = document.body.querySelector('.mui-table-view');
					var count_length = 10;
					var count_json;
					$.ajax({
						type: "post",
						dataType: "json",
						url: url,
						data: {
							"pageIndex":count,
							"pageSize":count_length
						},
						success: function(json){
							console.log(json);
							count++;
							if(json == null	|| json == ""){
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
								$(".mui-pull-bottom-pocket").css("visibility","inherit");
								return count;
							}
							for (var i = 0; i < count_length; i++) {
								var li = "";
								var imgPath = json[i].imgPath = ""?json[i].imgPath:'img/touxiang.png';
								var userName=json[i].CREATEUSER.substr(0,3)+'*******'+json[i].CREATEUSER.substr(9,11);
								li += '<li class="mui-table-view-cell reservation_content1" data-url="Consultation_Plaza_details.html?id='+ json[i].ID +'">'+
											'<div class="reservation_content1_title">'+
												'<div class="reservation_content1_title_left">'+
													'<img src="'+ imgPath +'">'+
												'</div>'+
												'<div class="reservation_content1_title_right">'+
													'<p>'+ userName +'</p>'+
													'<p>'+ json[i].CREATETIME +'</p>'+
												'</div>'+
											'</div>'+
											'<div class="reservation_content1_content">'+ json[i].CONTENT +'</div>'+
											'<div class="Consultation_Plaza_content_bottom">'+
												'<div class="Consultation_Plaza_content_bottom_right">'+
													'<a href="javascript:;">'+ json[i].answerCount +'人回答</a>'+
												'</div>'+
											'</div>'+
										'</li>';
								$(".wh_plaza_content").append(li);
							}
							mui(".wh_plaza_content").on("tap","li",function(){
								mui.openWindow({
								    url: $(this).data('url'),
								    id:'Consultation_Plaza_details.html',
								    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
								    waiting:{
								      autoShow:true,//自动显示等待框，默认为true
								      title:'正在加载...',//等待对话框上显示的提示内容
								    }
								});
							});
						},
						error: function(jqXHR, textStatus, errorThrown) {
							mui.plusReady(function(){
									document.addEventListener("netchange", wainshow, false);
									wainshow();
								//message();
								});
								function wainshow() {
									if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
									mui.toast("网络异常，请检查网络设置！");				
									} else {
									//mui.toast("网络正常");
									}
								}
						}
					});
				},1500);
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			//初始化单页的区域滚动
			mui('.mui-scroll-wrapper').scroll();
			var view = viewApi.view;
			(function($) {
				//处理view的后退与webview后退
				var oldBack = $.back;
				$.back = function() {
					if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
						viewApi.back();
					} else { //执行webview后退
						oldBack();
					}
				};
				//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
				//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
				view.addEventListener('pageBeforeShow', function(e) {
					//				console.log(e.detail.page.id + ' beforeShow');
				});
				view.addEventListener('pageShow', function(e) {
					//				console.log(e.detail.page.id + ' show');
				});
				view.addEventListener('pageBeforeBack', function(e) {
					//				console.log(e.detail.page.id + ' beforeBack');
				});
				view.addEventListener('pageBack', function(e) {
					//				console.log(e.detail.page.id + ' back');
				});
			})(mui);
		</script>

	</body>

</html>